<template>
    <div class="setting_form_container">
        <el-form :ref="formRef" :rules="rules" :model="formData" :label-width="labelWidth">
            <el-row :gutter="10">
                <el-col :span="span" v-for="(item, index) in fields" :key="index" v-if="filterField(item)">
                    <el-form-item :label="item.label" :prop="item.prop">
                        <template v-if="item.type === 'radioGroup'">
                            <el-radio-group v-model="formData[item.prop]">
                                <el-radio v-for="(child, childIndex) in item.children"
                                          :key="`${index}_${childIndex}_radio_group`"
                                          :label="child.value">{{ child.name }}
                                </el-radio>
                            </el-radio-group>
                        </template>
                        <template v-else-if="item.type === 'radioGroupButton'">
                            <el-radio-group v-model="formData[item.prop]">
                                <el-radio-button v-for="(child, childIndex) in item.children"
                                                 :key="`${index}_${childIndex}_radio_group_button`"
                                                 :label="child.value">{{ child.name }}
                                </el-radio-button>
                            </el-radio-group>
                        </template>
                        <template v-else-if="item.type === 'select'">
                            <el-select v-model="formData[item.prop]" :multiple="item.multiple" style="width: 100%;">
                                <el-option v-for="(item, index) in listOpt[item.prop]" :key="index"
                                           :label="item.label" :value="item.value" />
                            </el-select>
                        </template>
                        <template v-else>
                            <el-input :type="item.type" v-model="formData[item.prop]" :style="item.style"
                                      clearable v-double-input="item.doubleInput" />
                        </template>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item v-if="!hideSubmit">
                <el-button type="primary" @click="saveSetting" v-btnLoading
                           style="width: 100px;">确 定
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "SettingForm",
    props: {
        type: {
            type: String,
            required: true,
        },
        accountSet: {
            type: String,
        },
        labelWidth: {
            type: String,
            default: '150px',
        },
        rules: {
            type: Object,
            default() {
                return {};
            },
        },
        fields: {
            type: Array,
            default() {
                return [];
            },
        },
        hideSubmit: {
            type: Boolean,
            default: false,
        },
        span: {
            type: Number,
            default: 24,
        },
    },
    data() {
        return {
            settingData: {},
            formData: {},
            listOpt: {},
        };
    },
    computed: {
        formRef() {
            return `commonSettingForm_${this.type}`;
        },
    },
    watch: {
        type: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
        accountSet: {
            handler() {
                this.init();
            },
            deep: true,
        },
    },
    methods: {
        filterField(item) {
            if (typeof item.filter === 'function') {
                return item.filter(this.formData);
            }
            return true;
        },
        init() {
            let _this = this;
            if (_this.$utils.isEmpty(this.type)) {
                return;
            }
            _this.formData = {};
            _this.listOpt = {};
            _this.$store.dispatch('fetchData', {
                url: _this.$api.API_GetSysSetting3rd,
                data: {
                    account_set_sid: _this.accountSet,
                    code: _this.type,
                },
            }).then(result => {
                _this.settingData = result.data || [];
                let data = {}, listOpt = {};
                if (_this.settingData.json_object) {
                    data = $.extend({}, _this.settingData.json_object);
                }
                _this.fields.forEach(item => {
                    if (_this.$utils.isEmpty(data[item.prop]) && _this.$utils.isNotEmpty(item.defaultValue)) {
                        data[item.prop] = item.defaultValue;
                    }
                    if (item.type === 'select') {
                        if (_this.$utils.isNotEmptyList(item.children)) {
                            listOpt[item.prop] = item.children;
                        }
                    }
                });
                _this.formData = data;
                _this.listOpt = listOpt;
            }).catch(() => {
            });
        },
        async saveSetting() {
            let _this = this;
            let valid = await _this.validateForm(_this.formRef);
            if (valid) {
                let jsonData = {};
                _this.fields.forEach(item => {
                    jsonData[item.prop] = _this.$utils.isNotEmpty(_this.formData[item.prop]) ? _this.formData[item.prop] : '';
                    if (item.type === 'select' && _this.$utils.isNotEmpty(item.optionField)) {
                        jsonData[item.optionField] = _this.listOpt[item.prop];
                    }
                });
                let subData = {
                    id: _this.settingData.id,
                    sid: _this.settingData.sid,
                    code: _this.settingData.code,
                    json: JSON.stringify(jsonData),
                };
                if (_this.$utils.isNotEmpty(_this.accountSet)) {
                    subData.account_set_sid = _this.accountSet;
                }
                return _this.$store.dispatch('fetchData', {
                    url: _this.$api.API_SaveSysSetting3rd,
                    data: subData,
                }).then(() => {
                    _this.$message.success('保存成功！');
                    _this.$emit('event', { type: 'success' });
                    return true;
                }).catch(() => {
                    return false;
                });
            }
            return valid;
        },
    },
}
</script>

<style scoped lang="less">
.setting_form_container {
    width: 100%;
    height: 100%;
    overflow: hidden;

    /deep/.el-input {
        height: 28px !important;
    }

    /deep/.el-input__inner {
        height: 28px !important;
    }
}
</style>
